<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax2.js"></script>

    <style>
        .container{
            padding-top: 100px;
            padding-left: 250px;
        }
    </style>

</head>

<body>
    <div class="container"> <!-- container  屏幕大小 -->
        <div class="form-inline">   <!-- form-inline  变成一行 -->
            <div class="form-group">
                <select name="" id="province" class="form-control"><!-- form-control  方框的样式 -->
                <option value="">请选择省市</option>

                </select>
            </div>
            <div class="form-group">
                <select name="" id="cities" class="form-control">
                <option value="">请选择城市</option>

                </select>
            </div>
            <div class="form-group">
                <select name="" id="areas" class="form-control">
                        <option value="">请选择县区</option>

                </select>
            </div>
        </div>
    </div>

    <!-- 省模板 -->
    <script type="text/html" id="tmp1">
        <option value="">请选择省份</option>
        {{each province}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

     <!-- 城市模板 -->
     <script type="text/html" id="tmp2">
        <option>请选择城市</option>
        {{each cities}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

     <!-- 区县模板 -->
     <script type="text/html" id="tmp3">
        <option>请选择区县</option>
        {{each areas}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>


    <script>
       const provinceObj =  document.querySelector("#province")
       const citiesObj =  document.querySelector("#cities")
       const areasObj =  document.querySelector("#areas")

       ajax({
           type:"GET",
           url:"http://www.biwuit.cn/spboot/provinces",
           success:function(data){
               if(data.length!=0){
                   console.log(data)
                   console.log(JSON.parse(data))
                   
                   const options = template("tmp1",{province:JSON.parse(data)})
                   console.log(options)
                   provinceObj.innerHTML = options;
               }
           }
       })


       provinceObj.onchange = function(){
        //    console.log("haha")
        const pid = this.value      //获取的是 provinceObj 的value属性
        console.log(pid)
        ajax({
            type:"GET",
            url:"http://www.biwuit.cn/spboot/cities",
            data:{
                id:pid
            },
            success:function(data){
                console.log(data)
                const option = template("tmp2",{cities:JSON.parse(data)})
                citiesObj.innerHTML = option;
            }
        })
       }

       citiesObj.onchange = function(){
        //    console.log("haha")
        const pid = this.value      //获取的是 provinceObj 的value属性
        console.log(pid)
        ajax({
            type:"GET",
            url:"http://www.biwuit.cn/spboot/areas",
            data:{
                id:pid
            },
            success:function(data){
                console.log(data)
                const option = template("tmp3",{areas:JSON.parse(data)})
                areasObj.innerHTML = option;
            }
        })
       }

    </script>
  



</body>

</html>